<script setup lang="ts">

import {ref} from "vue";
import {useRouter} from "vue-router";


const router = useRouter()
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const defaultActive = ref(router.currentRoute.value.path)
</script>

<template>
  <el-menu
      style="height: 100%;"
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      :default-active="defaultActive"
      router
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
  >
      <el-menu-item index="/admin/home">
        <el-icon><Odometer /></el-icon>
          <span>首页</span>
      </el-menu-item>
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>学生管理</span>
      </template>
        <el-menu-item index="/admin/stu-list">学生列表</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/admin/department-list">
      <el-icon><Connection /></el-icon>
      <span>院系管理</span>
    </el-menu-item>
    <el-menu-item index="/admin/classroom-list">
      <el-icon><User /></el-icon>
      <span>班级管理</span>
    </el-menu-item>
    <el-sub-menu index="/admin/xxx">
      <template #title>
        <el-icon><Star /></el-icon>
        <span>学院课程</span>
      </template>
      <el-menu-item index="/admin/course-list">课程管理</el-menu-item>
      <el-menu-item index="/admin/CourseAssignment">课程分配</el-menu-item>
      <el-menu-item index="/admin/condition">学生选课情况</el-menu-item>
    </el-sub-menu>
<!--      <el-menu-item index="/admin/aaa">-->
<!--        <el-icon><PieChart /></el-icon>-->
<!--          <span>成绩管理</span>-->
<!--      </el-menu-item>-->


  </el-menu>
</template>

<style scoped>

</style>